<template>
  <div class="components-member">
    <div
      v-if="isCover===true"
      class="page-cover"
    />
    <CustAnalysisTitle
      :title="title"
      :tips="tips"
    />
    <CustAnalysisOverview
      :hover="hover"
      :overview-data="overviewData1"
      @index="recIndex"
    />
    <div class="fans-chart">
      <div class="fans-chart__title">
        <h4>{{ $t('dataAnalysis.fansAct') }}</h4>
      </div>
      <CustAnalysisOverview :overview-data="overviewData2" />

      <!-- 图表 -->
      <div
        v-show="formActive===1"
        class="member-distribution-chart"
      >
        <div class="chart-left">
          <div
            id="depth-echart-left"
            style="width:60%;height:300px;"
          />
        </div>
        <div class="chart-right">
          <div
            id="depth-echart-right"
            style="width:100%;height:300px;"
          />
        </div>
      </div>

      <div
        v-show="formActive===2"
        class="member-trend-chart"
      >
        <div class="charts-title">
          <div
            v-for="(item,isIndex) in sumData"
            :key="item"
            class="charts-title-item"
          >
            <div
              :style="{background: lineStyle[isIndex].normal.lineStyle.color}"
              class="line"
            />
            <span>{{ item }}</span>
          </div>
        </div>
        <common-chart
          v-if="memberTrendChart.show"
          :options="memberTrendChart.options"
          style="width: 100%; height: 350px"
        />
      </div>
      <!-- /图表 -->
    </div>

    <!-- 单独类型的表 -->
    <div
      v-show="index!==0"
      id="sin-chart"
      class="sin-chart"
    >
      <div class="header">
        <div>{{ [`${$t('dataAnalysis.totalMembership')}`,`${$t('dataAnalysis.numberOfNewMembers')}`,`${$t('dataAnalysis.upgradedMember')}`,`${$t('dataAnalysis.storedValueMember')}`][index-1] }}</div>
        <div
          class="close-window"
          @click="closeWin"
        >
          X
        </div>
      </div>
      <div class="sin-trend-chart">
        <common-chart
          v-if="sinTrendChart.show"
          class="refund-chart"
          :options="sinTrendChart.options"
          style="width: 100%; height: 300px"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import CustAnalysisTitle from './cust-analysis-title.vue'
import CustAnalysisOverview from './cust-analysis-overview.vue'
const props = defineProps({
  timeData: {
    type: Object,
    default: null
  }
})
const formActive = ref(2)

const lineStyle = [
  {
    normal: {
      color: '#29CB97',
      lineStyle: {
        color: '#29CB97'
      }
    }
  },
  {
    normal: {
      color: '#0058FF',
      lineStyle: {
        color: '#0058FF'
      }
    }
  },
  {
    normal: {
      color: '#F56C6C',
      lineStyle: {
        color: '#F56C6C'
      }
    }
  },
  {
    normal: {
      color: '#9CA3E1',
      lineStyle: {
        color: '#9CA3E1'
      }
    }
  }
]
const areaStyle = [
  {
    colorType: 'LinearGradient',
    colorOption: {
      direction: [0, 0, 0, 1],
      color: [
        { offset: 0, color: 'rgba(41, 203, 151, 0.41)' },
        { offset: 1, color: '#ffffff' }
      ]
    }
  },
  {
    colorType: 'LinearGradient',
    colorOption: {
      direction: [0, 0, 0, 1],
      color: [
        { offset: 0, color: 'rgba(24,144,255,0.6)' },
        { offset: 1, color: '#ffffff' }
      ]
    }
  },
  {
    colorType: 'LinearGradient',
    colorOption: {
      direction: [0, 0, 0, 1],
      color: [
        { offset: 0, color: '#F56C6C' },
        { offset: 1, color: '#ffffff' }
      ]
    }
  },
  {
    colorType: 'LinearGradient',
    colorOption: {
      direction: [0, 0, 0, 1],
      color: [
        { offset: 0, color: '#9CA3E1' },
        { offset: 1, color: '#ffffff' }
      ]
    }
  }
]
let dateValue = 1
let dateRange = []
watch(() => props.timeData, () => {
  dateValue = props.timeData.dateValue
  dateRange = props.timeData.dateRange
  getMemberInf()
}, { deep: true })
onMounted(() => {
  initOverview()
  getMemberTrendChart()
  getSinTypeChart()
})
/**
 * 初始化数据
 */
const tips = ref('')
const title = ref('')
const hover = ref('')
// 总览信息
const overviewData1 = ref({
  title: [],
  num: [],
  type: 1,
  rate: []
})
// 总览信息
const overviewData2 = ref({
  title: [],
  num: [],
  type: 1,
  rate: []
})
const initOverview = () => {
  title.value = $t('dataAnalysis.membershipStatistics')
  tips.value = $t('dataAnalysis.statisticsTips')
  hover.value = true
  overviewData1.value = {
    title: [$t('dataAnalysis.totalMembership'), $t('dataAnalysis.numberOfNewMembers'), $t('dataAnalysis.upgradedMember'), $t('dataAnalysis.storedValueMember')],
    num: ['0', '0', '0', '0'],
    type: 1,
    rate: [0, 0, 0, 0]
  }
  overviewData2.value = {
    title: [$t('dataAnalysis.visitMembers'), $t('dataAnalysis.numberOfCouponMembers'), $t('dataAnalysis.addCartMembers'), $t('dataAnalysis.numberOfTradedMembers')],
    num: ['0', '0', '0', '0'],
    type: 0,
    rate: [0, 0, 0, 0]
  }
}
/**
 * 初始化一个obj
 */
const initObj = (name) => {
  const obj = {}
  obj.name = name
  obj.type = 'line'
  obj.smooth = true
  obj.data = []
  return obj
}
/**
 * 获取会员信息
 */
let sinTrendDateArr = []
let trendDateArr = []
let accMemberSeriesDataArr = []
let newAddMemberSeriesDataArr = []
let growMenberSeriesDataArr = []
let storedMemberSeriesDataArr = []
let seriesTrendDataArr = []

const getMemberInf = () => {
  http({
    url: http.adornUrl('/admin/customerAnalysis/getMemberCount'),
    method: 'get',
    params: http.adornParams(
      {
        dateType: dateValue,
        startTime: dateRange[0],
        endTime: dateRange[1]
      }
    )
  }).then(({ data }) => {
    if (data) {
      // 概况信息赋值
      overviewData1.value.type = dateValue
      overviewData1.value.num = [data.memberCount.accumulate, data.memberCount.newAddMember, data.memberCount.growthMember, data.memberCount.storedValue]
      overviewData1.value.rate = [data.memberCount.accumulateRate, data.memberCount.newAddMemberRate, data.memberCount.growthMemberRate, data.memberCount.storedValueRate]
      overviewData2.value.num = [data.memberLively.memberV, data.memberLively.memberGetCoupon, data.memberLively.memberAddCat, data.memberLively.memberPay]
      overviewData2.value.rate = [data.memberLively.memberVRate, data.memberLively.memberGetCouponRate, data.memberLively.memberAddCatRate, data.memberLively.memberPayRate]
      // 会员趋势图表
      trendDateArr = []
      seriesTrendDataArr = []
      const obj1 = initObj($t('dataAnalysis.visitMembers'))
      const obj2 = initObj($t('dataAnalysis.numberOfCouponMembers'))
      const obj3 = initObj($t('dataAnalysis.addCartMembers'))
      const obj4 = initObj($t('dataAnalysis.numberOfTradedMembers'))
      data.memberLively.memberLivelyTrend.forEach(i => {
        trendDateArr.push(formatDate(i.currentDay))
        obj1.data.push(i.memberV)
        obj2.data.push(i.memberGetCoupon)
        obj3.data.push(i.memberAddCat)
        obj4.data.push(i.memberPay)
      })
      seriesTrendDataArr.push(obj1)
      seriesTrendDataArr.push(obj2)
      seriesTrendDataArr.push(obj3)
      seriesTrendDataArr.push(obj4)
      let i = 0
      seriesTrendDataArr.forEach(item => {
        item.itemStyle = lineStyle[i]
        item.areaStyle = areaStyle[i]
        i++
      })
      // 单个类型表
      sinTrendDateArr = []
      accMemberSeriesDataArr = []
      newAddMemberSeriesDataArr = []
      growMenberSeriesDataArr = []
      storedMemberSeriesDataArr = []
      const accObj = initObj($t('dataAnalysis.totalMembership'))
      const newAddObj = initObj($t('dataAnalysis.numberOfNewMembers'))
      const growObj = initObj($t('dataAnalysis.upgradedMember'))
      const storedObj = initObj($t('dataAnalysis.storedValueMember'))
      data.memberCount.list.forEach(i => {
        sinTrendDateArr.push(i.currentDay)
        accObj.data.push(i.accumulate)
        newAddObj.data.push(i.newAddMember)
        growObj.data.push(i.growthMember)
        storedObj.data.push(i.storedValue)
      })
      accMemberSeriesDataArr.push(accObj)
      newAddMemberSeriesDataArr.push(newAddObj)
      growMenberSeriesDataArr.push(growObj)
      storedMemberSeriesDataArr.push(storedObj)
      showSingChart()
      getMemberTrendChart()
    }
  })
}
/**
 * 接收索引，并展示相应的表
 */
const index = ref(0)
const isCover = ref(false)

const recIndex = (data) => {
  isCover.value = true
  index.value = data
  showSingChart()
}
/**
 * 关闭单独类型值表的窗口
 */
const closeWin = () => {
  isCover.value = false
  index.value = 0
}

/**
 * 生成会员趋势表
 */
const sumData = ref([])
const memberTrendChart = reactive({
  options: {},
  show: false
})
const getMemberTrendChart = () => {
  sumData.value = []
  seriesTrendDataArr.forEach(item => {
    sumData.value.push(item.name)
  })
  memberTrendChart.options = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      padding: 8,
      textStyle: { // 提示框浮层的文本样式。
        fontSize: '12px',
        fontWeight: 400,
        color: '#33333',
        opacity: 1,
        lineHeight: '20px'
      },
      extraCssText: 'box-shadow:0px 1px 11px rgba(213, 220, 226, 0.73);'
    },
    grid: {
      top: '50px',
      left: '50px',
      right: '50px',
      bottom: '50px'
    },
    legend: [],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: trendDateArr,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false }
    },
    series: seriesTrendDataArr
  }
  memberTrendChart.show = true
}

/**
 * 选择显示的表
 */
let singSeriesArr = []
const showSingChart = () => {
  if (index.value === 1) {
    singSeriesArr = accMemberSeriesDataArr
  } else if (index.value === 2) {
    singSeriesArr = newAddMemberSeriesDataArr
  } else if (index.value === 3) {
    singSeriesArr = growMenberSeriesDataArr
  } else if (index.value === 4) {
    singSeriesArr = storedMemberSeriesDataArr
  }
  getSinTypeChart()
}

const sinTrendChart = reactive({
  options: {},
  show: false
})
/**
 * 获取单个类型值的表
 */
const getSinTypeChart = () => {
  sinTrendChart.options = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: sinTrendDateArr,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false }
    },
    series: singSeriesArr
  }
  sinTrendChart.show = true
}
/**
 * 格式化时间
 */
const formatDate = (date) => {
  return date
}

</script>

<style lang="scss" scoped>
.components-member {
  .page-cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
    overflow-y: hidden;
    z-index: 1983;
  }

  /* 会员分布图表 */
  .member-distribution-chart {
    display: flex;
  }

  .member-distribution-chart .chart-left,
  .member-distribution-chart .chart-right {
    width: 50%;
    padding: 8px;
  }

  .member-distribution-chart .chart-left {
    display: flex;
    justify-content: center;
    width: 30%;
  }

  .member-distribution-chart .chart-right {
    width: 70%;
  }

  .member-trend-chart {
    margin-top: 20px;
  }

  /* /会员分布图表 */

  /* 粉丝活跃 */
  .fans-chart__title {
    margin-top: 20px;
    margin-bottom: 15px;
    position: relative;
  }

  .fans-chart__title h4 {
    font-size: 18px;
    font-weight: bold;
    line-height: 16px;
    color: #333333;
    opacity: 1;
  }

  /* 单独的表 */
  .sin-chart {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 800px;
    height: 400px;
    padding: 16px 0;
    background: #fff;
    border-radius: 5px;
    margin: auto;
    z-index: 1984;
  }

  .sin-chart .header {
    display: flex;
    font-size: 15px;
    padding: 0 16px 14px;
    border-bottom: 1px solid #dcdee0;
  }

  .sin-chart .header .close-window {
    margin-left: auto;
  }

  .sin-chart .sin-trend-chart {
    width: 100%;
    padding: 10px;
    margin-top: 20px;
  }
}
.charts-title {
  width: 100%;
  display: flex;
  justify-content: center;
}
.charts-title .charts-title-item .line {
  width: 18px;
  height: 8px;
  opacity: 1;
  border-radius: 8px;
  margin-right: 10px;
}
.charts-title .charts-title-item {
  margin-right: 40px;
  color: #999999;
  font-size: 12px;
  display: flex;
  align-items: center;
  height: 20px;
}
</style>
